<!-- 
*
* 文章归档
*
-->
<template>
    <div class="archives-container shadow-box">
        <div class="archives-title">
            <svgIcon iconName="icon-guidang"></svgIcon>
            <span>归档</span>
        </div>
        <div class="archives-main">
            <div 
            class="archives-item flx-justify-between" 
            v-for="(item, year) in fileList" 
            :key="item"
            @click="goPage(year)">
                <div class="time">{{ year }}</div>
                <div class="count flx-center">{{ item.length }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import { articleStore } from '@/store/article/article';
import { computed, nextTick } from 'vue';
import { formatTimeToYear } from '@/utils/date-util';
import { ARTICLE_STATUS } from '@/constants/system/article';
import { useRouter } from 'vue-router';

// ========================= 实列挂载之前调用 =========================
// 数据初始化
onBeforeMount(() => {
    getAllArticle();
});

// ========================= 计算属性 =========================
const fileList = computed(() => {
    const grouped = {};
    articleList.value.forEach((item) => {
        let year = formatTimeToYear(item.createdAt);
        if(!grouped[year]) {
            grouped[year] = [];
        };
        grouped[year].push(item)
    })
    return grouped;
})

// ========================= 获取数据 =========================
const { getArticleInfo } = articleStore();
const articleList = ref([]);
async function getAllArticle() {
    let conditions = {
        params: {
            status: ARTICLE_STATUS.RELEASE_STATE.value,
            articleTitle:'',
        }
    }
    const data = await getArticleInfo(conditions);
    articleList.value = data.data;
};

// ========================= 路由操作 =========================
const router = useRouter(); // 路由
function goPage(item) {
    router.push({
        path: '/article/list',
        query: {
            year: item
        }
    })
};
</script>

<style lang="scss" scoped>
    @import './archives-sidebar.scss';
</style>

